<template>
  <div>
    <p class="title">添加数据源</p>
    <div class="form">
      <a-form :model="dataBase" v-bind="layout" name="nest-messages" class="a-form" :rules="rules" @finish="onFinish">
        <a-form-item name="dtCode" label="数据库类型">
          <a-select v-model:value="dataBase.dtCode" placeholder="请选择" :options="dtCode" :field-names="{ label: 'dtName', value: 'dtCode' }" />
        </a-form-item>
        <a-form-item name="dsmName" label="数据源名称">
          <a-input v-model:value="dataBase.dsmName" :maxlength="30" />
        </a-form-item>
        <a-form-item name="dsmDescribe" label="数据源描述">
          <a-input v-model:value="dataBase.dsmDescribe" :maxlength="200" />
        </a-form-item>
        <a-form-item name="dsmConnectInfo" label="JDBC URL">
          <a-input v-model:value="dataBase.dsmConnectInfo" placeholder="示例：jdbc:mysql://172.16.23.33:3306/basic" :maxlength="200" />
        </a-form-item>
        <a-form-item name="dsmDriverName" label="驱动类名">
          <a-input v-model:value="dataBase.dsmDriverName" />
        </a-form-item>
        <a-form-item name="dsmUsername" label="用户名">
          <a-input v-model:value="dataBase.dsmUsername" placeholder="请输入" />
        </a-form-item>
        <a-form-item name="dsmPassword" label="密码">
          <a-input v-model:value="dataBase.dsmPassword" type="password" placeholder="请输入" />
        </a-form-item>
        <a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 0 }">
          <a-button :disabled="connectTestBtn" type="primary" @click="connectTest">连通测试</a-button>
          <a-tag v-model:visible="flag" :color="connectMsg.class">{{ connectMsg.msg }}</a-tag>
        </a-form-item>
        <a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 8 }">
          <a-button style="margin-right: 20%" @click="cancel">取消</a-button>
          <a-button type="primary" html-type="submit">确定</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { addingDataSourcesHooks } from '@/hooks/DatabaseManagementHooks/addingDataSourcesHooks';
  import { getDataBaseListHooks } from '@/hooks/DatabaseManagementHooks/getDataBaseListHooks';
  import { getDataBaseType, postConnectTest } from '@/api/test/index';
  const { getList } = getDataBaseListHooks();
  const { dataBase, databaseDrawer, addingData } = addingDataSourcesHooks();
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const dtCode = ref<[]>([]);
  // 控制标签是否显示
  const flag = ref<boolean>(false);
  //校验
  const rules = {
    //数据库类型
    dtCode: [
      {
        required: true,
        message: '请选择！',
      },
    ],
    //数据源名称
    dsmName: [
      {
        required: true,
        message: '数据源名称不能为空！',
        validateTrigger: 'onBlur',
      },
      {
        pattern: '^[a-zA-Z0-9_\u4e00-\u9fa5]+$',
        message: '不支持特殊符号及空格',
      },
    ],
    //JDBC URL
    dsmConnectInfo: [
      {
        required: true,
        message: 'JDBC URL不能为空',
      },
    ],
    //驱动类名
    dsmDriverName: [
      {
        required: true,
        message: '驱动类名不能为空',
      },
    ],
  };
  // 连通测试按钮是否禁用
  const connectTestBtn = ref<boolean>(true);
  watch(
    dataBase,
    () => {
      if (dataBase.dsmConnectInfo != '' && dataBase.dsmDriverName != '') {
        connectTestBtn.value = false;
      } else {
        connectTestBtn.value = true;
      }
    },
    { immediate: true },
  );

  // 从后端得到数据库类型
  const handDataBaseType = async () => {
    console.log(111);
    const res = await getDataBaseType();
    dtCode.value = res as [];
    console.log(res);
  };
  onMounted(() => {
    handDataBaseType();
  });
  // 向后端发送修改或新增数据
  const onFinish = async (values: any) => {
    console.log('Success:', values);
    await addingData();
    databaseDrawer.value = false;
    getList();
  };
  // 连通测试后的提示文字
  const connectMsg = ref<{ class?: string; msg?: string }>({});
  const connectTest = async () => {
    let res = await postConnectTest(dataBase);
    if (res != undefined) {
      flag.value = true;
      connectMsg.value = res;
      console.log(res);
    }
  };
  const cancel = () => {
    databaseDrawer.value = false;
  };
</script>
<style lang="less" scoped>
  .title {
    font-size: 18px;
    text-align: center;
  }

  .form {
    // border: 1px solid black;
    .a-form {
      margin-top: 10px;
      // background-color: pink;
      padding-right: 35px;
    }
  }

  .footer {
    margin-right: auto;
    margin-left: auto;
    // background-color: pink;
    width: 200px;

    .button {
      margin-left: 20px;
    }
  }
</style>
